import { useEffect } from "react";
import { useReactive } from "ahooks";
import { Row, Col, Pagination } from "antd";
import { Card as SemiCard, List, ButtonGroup, Button } from "@douyinfe/semi-ui";
import { IconRefresh } from "@douyinfe/semi-icons";
import { useModel } from "umi";

import useAllRoles from "../../hooks/application/person/useAllRoles";
import useRoleApplications from "../../hooks/application/person/useRoleApplications";

import ApplicationTable from "../../components/application/person/Table";

const OrganizationApplicationsByRole = () => {
    const { windowInnerHeight } = useModel("global");

    const { loading: roleLoading, roles, loadAllRoles } = useAllRoles();
    const { loading: appLoading, applications, loadRoleApplications } = useRoleApplications();

    const state = useReactive({
        selectedRole: {},
        selectedApplication: {},
        page: 1,
        pageSize: 20,
    });

    useEffect(() => {
        let selectedRole = roles.find((item) => item.acName === state.selectedRole?.pacName);
        !selectedRole && roles.length > 0 && (selectedRole = roles[0]);
        state.selectedRole = selectedRole || {};
    }, [roles]);

    const loadApplications = () => {
        loadRoleApplications(state.selectedRole.parName);
    };

    useEffect(() => {
        if (state.selectedRole?.parName) {
            loadApplications();
        }
    }, [state.selectedRole]);

    const SemiCardFooter = (
        <div style={{ padding: 6, textAlign: "center" }}>
            <Pagination
                total={applications.length}
                pageSize={state.pageSize}
                position={["none", "bottomCenter"]}
                hideOnSinglePage={false}
                showSizeChanger={false}
                onChange={(page) => (state.page = page)}
                itemRender={(_, type, originalElement) => {
                    if (type === "prev") return <a>上一页</a>;
                    if (type === "next") return <a>下一页</a>;
                    return originalElement;
                }}
            />
        </div>
    );

    const cardBodyHeight = windowInnerHeight - 90 - 54 - 20;

    return (
        <Row gutter={10} style={{ display: "flex", padding: 10 }}>
            <Col span={4}>
                <SemiCard
                    title={<span style={{ lineHeight: "32px", fontSize: 16 }}>所属角色</span>}
                    headerExtraContent={
                        <ButtonGroup>
                            <Button icon={<IconRefresh />} onClick={loadAllRoles}></Button>
                        </ButtonGroup>
                    }
                    headerStyle={{ padding: "10px 14px" }}
                    shadows="always"
                    bordered={false}
                    bodyStyle={{ padding: 1, height: cardBodyHeight, overflow: "auto" }}
                >
                    <List
                        loading={roleLoading}
                        dataSource={roles}
                        renderItem={(item, index) => <List.Item key={index} className={`list-item ${state.selectedRole?.parName === item?.parName ? "list-item-selected" : ""}`} main={<div title={item?.aoDesc}>{item?.parName || "-"}</div>} onClick={() => (state.selectedRole = item)}></List.Item>}
                    />
                </SemiCard>
            </Col>

            <Col span={20}>
                <SemiCard
                    title={<span style={{ lineHeight: "32px", fontSize: 16 }}>应用列表</span>}
                    headerExtraContent={
                        <ButtonGroup>
                            <Button icon={<IconRefresh />} onClick={loadApplications}></Button>
                        </ButtonGroup>
                    }
                    headerStyle={{ padding: "10px 14px" }}
                    shadows="always"
                    bordered={false}
                    bodyStyle={{ padding: 0, height: cardBodyHeight - 46 }}
                    footerStyle={{ padding: 0 }}
                    footerLine={true}
                    footer={SemiCardFooter}
                >
                    <ApplicationTable appLoading={appLoading} applications={applications} reloadData={loadApplications} cardBodyHeight={cardBodyHeight} />
                </SemiCard>
            </Col>
        </Row>
    );
};

export default OrganizationApplicationsByRole;
